﻿
@{
    ViewData["Title"] = "商铺列表";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="title">商铺列表</div>
                <div class="content">
                    <p style="margin: 10px 15px;">
                        <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
                    </p>

                </div>
                <div class="mui-card">
                    <ul class="mui-table-view mui-table-view-chevron">
                        <li class="mui-table-view-cell">
                            card（圆角列表）
                        </li>
                        <li class="mui-table-view-cell mui-collapse">
                            <a class="mui-navigate-right" href="#">产品</a>
                            <ul class="mui-table-view mui-table-view-chevron">
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">iOS</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">Android</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">HTML5</a>
                                </li>
                            </ul>
                        </li>
                        <li class="mui-table-view-cell mui-collapse">
                            <a class="mui-navigate-right" href="#">方案</a>
                            <ul class="mui-table-view mui-table-view-chevron">
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">PC方案</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">手机方案</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">TV方案</a>
                                </li>
                            </ul>
                        </li>
                        <li class="mui-table-view-cell mui-collapse">
                            <a class="mui-navigate-right" href="#">新闻</a>
                            <ul class="mui-table-view mui-table-view-chevron">
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">公司新闻</a>
                                </li>
                                <li class="mui-table-view-cell">
                                    <a class="mui-navigate-right" href="#">行业新闻</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </aside>
    <div class="mui-inner-wrap">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
            <a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right"></a>
            <h1 class="mui-title">商铺列表</h1>
        </header>
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <div class="mui-input-row mui-search">
                    <input type="search" class="mui-input-clear" placeholder="旺铺搜索">
                </div>
                <div class="mui-card">
                    <div class="mui-card-header mui-card-media">
                        <img src="/images/logo.png" />
                        <div class="mui-media-body">
                            店鋪名稱******旺鋪
                            <p><span class="mui-icon mui-icon-location"></span>店鋪位置xxx街道***號旺鋪</p>
                        </div>
                        <!--<img class="mui-pull-left" src="/images/logo.png" width="34px" height="34px" />
            <h2>小M</h2>
            <p>发表于 2016-06-30 15:30</p>-->
                    </div>
                    <div class="mui-card-content">
                        <img src="/images/yuantiao.jpg" alt="" width="100%" />
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-heart"></span>關注店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-share"></span>分享店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon mui-icon-redo"></span>進入店鋪</a>
                    </div>
                </div>
                <div class="mui-card">
                    <div class="mui-card-header mui-card-media">
                        <img src="/images/logo.png" />
                        <div class="mui-media-body">
                            店鋪名稱******旺鋪
                            <p><span class="mui-icon mui-icon-location"></span>店鋪位置xxx街道***號旺鋪</p>
                        </div>
                        <!--<img class="mui-pull-left" src="/images/logo.png" width="34px" height="34px" />
            <h2>小M</h2>
            <p>发表于 2016-06-30 15:30</p>-->
                    </div>
                    <div class="mui-card-content">
                        <img src="/images/yuantiao.jpg" alt="" width="100%" />
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-heart"></span>關注店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-share"></span>分享店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon mui-icon-redo"></span>進入店鋪</a>
                    </div>
                </div>

                <div class="mui-card">
                    <div class="mui-card-header mui-card-media">
                        <img src="/images/logo.png" />
                        <div class="mui-media-body">
                            店鋪名稱******旺鋪
                            <p><span class="mui-icon mui-icon-location"></span>店鋪位置xxx街道***號旺鋪</p>
                        </div>
                        <!--<img class="mui-pull-left" src="/images/logo.png" width="34px" height="34px" />
            <h2>小M</h2>
            <p>发表于 2016-06-30 15:30</p>-->
                    </div>
                    <div class="mui-card-content">
                        <img src="/images/yuantiao.jpg" alt="" width="100%" />
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-heart-filled"></span>已關注</a>
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-share"></span>分享店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon mui-icon-redo"></span>進入店鋪</a>
                    </div>
                </div>

                <div class="mui-card">
                    <div class="mui-card-header mui-card-media">
                        <img src="/images/logo.png" />
                        <div class="mui-media-body">
                            店鋪名稱******旺鋪
                            <p><span class="mui-icon mui-icon-location"></span>店鋪位置xxx街道***號旺鋪</p>
                        </div>
                        <!--<img class="mui-pull-left" src="/images/logo.png" width="34px" height="34px" />
            <h2>小M</h2>
            <p>发表于 2016-06-30 15:30</p>-->
                    </div>
                    <div class="mui-card-content">
                        <img src="/images/yuantiao.jpg" alt="" width="100%" />
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-heart-filled"></span>關注店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-share"></span>分享店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon mui-icon-redo"></span>進入店鋪</a>
                    </div>
                </div>

                <div class="mui-card">
                    <div class="mui-card-header mui-card-media">
                        <img src="/images/logo.png" />
                        <div class="mui-media-body">
                            店鋪名稱******旺鋪
                            <p><span class="mui-icon mui-icon-location"></span>店鋪位置xxx街道***號旺鋪</p>
                        </div>
                        <!--<img class="mui-pull-left" src="/images/logo.png" width="34px" height="34px" />
            <h2>小M</h2>
            <p>发表于 2016-06-30 15:30</p>-->
                    </div>
                    <div class="mui-card-content">
                        <img src="/images/yuantiao.jpg" alt="" width="100%" />
                    </div>
                    <div class="mui-card-footer">
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-heart-filled"></span>關注店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon-extra mui-icon-extra-share"></span>分享店鋪</a>
                        <a class="mui-card-link"><span class="mui-icon mui-icon-redo"></span>進入店鋪</a>
                    </div>
                </div>
                <div class="mui-content-padded">
                    <ul class="mui-pager">
                        <li class="mui-previous">
                            <a href="#">
                                上一页
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                當前第1頁
                            </a>
                        </li>
                        <li class="mui-next">
                            <a href="#">
                                下一页
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- off-canvas backdrop -->
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<nav class="mui-bar mui-bar-tab" id="menuList">
    <a class="mui-tab-item" href="/">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="/Goods/GoodsClass">
        <span class="mui-icon mui-icon-extra mui-icon-extra-class"></span>
        <span class="mui-tab-label">分类</span>
    </a>
    <a class="mui-tab-item  mui-active" href="/Goods/ShopList">
        <span class="mui-icon mui-icon-extra mui-icon-extra-gift"></span>
        <span class="mui-tab-label">挑货</span>
    </a>
    <a class="mui-tab-item" href="/MerchantInfo">
        <span class="mui-icon mui-icon-extra mui-icon-extra-peoples"></span>
        <span class="mui-tab-label">我的</span>
    </a>
</nav>
<script>
    mui.init({
        swipeBack: false,
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui('#offCanvasWrapper');
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    var classList = offCanvasWrapper[0].classList;
    document.getElementById('offCanvasHide').addEventListener('tap', function () {
        offCanvasWrapper.offCanvas('close');
    });
    //主界面和侧滑菜单界面均支持区域滚动；
    mui('#offCanvasSideScroll').scroll();
    mui('#offCanvasContentScroll').scroll();
</script>
<script>
    mui('#menuList').on('tap', 'a', function () {
        // 获取地址
        var href = this.getAttribute('href');
        // 方法一：
        location.href = href;
    })
</script>

